<template lang="pug">
div
  g-h.tab-bar(v-if="showBarcode" j-c="space-around")
    div.tab-bar-item(
        :class="{'tab-is-active': active === 'ScanPage'}"
        @click="selectTab('ScanPage')"
        )
      div 提交页面

  mt-tab-container(v-model="active")
    mt-tab-container-item(id="ScanPage")
      ScanPage(
          :forceUpdate="active === 'ScanPage'"
          :minusBottomHeight="minusBottomHeight"
          @show-barcode="showBarcode = true"
          )

</template>

<script>
import api from "$api"
import util from "$util"

import ScanPage from "./ScanPage.vue"

export default {
  components: {
    ScanPage,
  },
  data() {
    return {
      active: "ScanPage",
      showBarcode: true,
    }
  },
  computed: {
    minusBottomHeight() {
      if (this.showBarcode) {
        return 50
      } else {
        return 0
      }
    },
  },
  methods: {
    selectTab(tag) {
      if (this.active === tag) {
        return
      }
      this.active = tag
    },
  },
}
</script>

<style lang="stylus" scoped>

.tab-bar
  z-index: 2
  position: fixed
  bottom: 0
  left: 0
  right: 0
  border-top: 1px solid grey300
  background: grey200
  white-space: nowrap
  overflow-no-scrollbar()

  &-item
    width: 25%
    padding: 0.5rem 0
    font-size: 16px
    color: grey800

    display: flex
    flex-flow: column
    justify-content: center
    align-items: center

.tab-is-active
  color: cyan600

</style>
